<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id='app'>
        <div>{{user.name}}</div>
        <button @click="changeName">修改名字</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                user: {
                    name: '张三',
                    age: 38
                }
            },
            methods: {
                changeName() {
                    this.user.name = "李四"
                    this.user.age = 19
                }
            },
            watch: {
                // "user.name"() {
                //     console.log("监听到了用户的变化");
                // }
                // 开启对象的深度监听，即使对象中的属性变化，也能监听到
                user: {
                    deep: true,
                    handler(newVal, oldVal) {
                        console.log("深度监听到了对象的变化");
                    }
                }
            },
        })
    </script>
</body>

</html>